<template>
    <div class="parent">
        money: {{ money }}
        <button @click="addMoney" style="margin: 5px;">加钱</button>
        <!-- 父通信子：在子组件身上绑定一个自定义属性 -->
        <!-- 子通信父：在子组件身上绑定一个自定义事件 -->
        <SonCom :money = "money" @getSonMsg = "handler"/>
        儿子的女朋友: {{ sonGirlFriend }}
    </div>
</template>

<script setup>
import SonCom from './SonCom.vue'
import { ref } from 'vue'
const money = ref(100)
const addMoney = () => {
    money.value += 100
}
const sonGirlFriend = ref('')
const handler = (data) => {
    console.log('通信成功')
    sonGirlFriend.value = data
}
</script>

<style scoped>
.parent {
    height: 500px;
    width: 500px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>